<template>
  <Echart height="100%" width="100%" :options="options"/>
</template>

<script>
import Echart from '@/components/Echart/index'
import resize from '@/utils/resize'

export default {
  name: 'lineChart',
  components:{ Echart },
  mixins:[resize],
  props:{
    cdata: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data(){
    return {
      options:null
    }
  },
  watch:{
    cdata:{
      handler(newValue) {
        this.options = {
          color:newValue.color,
          grid: {
            left: '4%',
            top: '3%',
            right: '6%',
            bottom: '3%',
            // 把x轴和y轴纳入 grid
            containLabel: true,
          },
          tooltip:{
            show:true
          },
          xAxis: {
            axisLabel:{
              color:'rgba(0,0,0,.45)'
            },
            axisTick:{
              lineStyle:{
                color:'rgba(0,0,0,.45)'
              }
            },
            axisLine:{
              lineStyle:{
                color:'rgba(0,0,0,.45)'
              }
            },
            type: 'category',
            data: newValue.xAxis,
            boundaryGap:false
          },
          yAxis: {
            axisLabel:{
              color:'rgba(0,0,0,.4)'
            },
            axisLine:{
              show:false,
            },
            axisTick:{
              show:false,
            },
            splitArea: {
              show: false
            },
            type: 'value',
          },
          series: [
            {
              data: newValue.value,
              type: 'line',
              smooth:false,
              areaStyle: {
                color: newValue.color,
                opacity:0.09
              }
            }
          ]
        }
      },
      immediate: true,
        deep: true
    }
  }
}
</script>

<style scoped>

</style>
